<template>
	<view class="order">
		<view class="content">
			<navigator @click="item('1')" url="" :class="curentcolor=='1'&&'color'">全部</navigator>
			<navigator @click="item('2')" url="" :class="curentcolor=='2'&&'color'">待付款</navigator>
			<navigator @click="item('3')" url="" :class="curentcolor=='3'&&'color'">待发货</navigator>
			<navigator @click="item('4')" url="" :class="curentcolor=='4'&&'color'">待收货</navigator>
			<navigator @click="item('5')" url="" :class="curentcolor=='5'&&'color'">待评价</navigator>
			<view class="bottom" :style="'left:'+left"></view>
		</view>
		<!-- 商品列表 -->
		<view class="commodity">
			<view v-if="data.length == 0" class="noneCommodity">
				<text>暂无订单</text>
				<view class="moreSup">更多精选商品</view>
				<view class="goods-list">
					<navigator url="/pages/detail/detail" class="goods-item" v-for="(item,index) in goodsList" :key="index">
						<view class="goods-img">
							<image class="grid-middle" :src="item.img_url"></image>
						</view>
						<view class="goods-bottom-wrap">
							<view class="goods-description">
								㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮
							</view>
							<view class="price-wrap">
								<view class="price">
									¥56.00
								</view>
								<view class="icon">
									<!-- <uni-icons type="cart-filled" size="20" color="#FF4B4B"></uni-icons> -->
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
			<!-- 全部 -->
			<view v-else-if="curentcolor == '1'" class="allCommodity">
				<!-- 顶部标题 -->
				<view class="allTop">
					<text class="title">联邦家居专营店</text>
					<text class="text">交易成功</text>
				</view>
				<!-- 中间内容 -->
				<view class="allContent">
					<!-- 内容图片 -->
					<view class="img">
						<!-- <image src="" mode=""></image> -->
					</view>
					<!-- 内容右侧 -->
					<view class="allTitle">
						<!-- 内容中部 -->
						<view class="allText">
							<!-- 内容介绍 -->
							<view class="title">
								<!-- 产品介绍 -->
								<view class="titleTop">
									<text>[狂暑价]清扬男士洗发水去屑洗发露一只羊两只羊三只羊私自羊五只羊一只羊两只羊三只羊私自羊五只羊</text>
								</view>
								<!-- 购买种类 -->
								<view class="titleCenter">
									<text>[狂暑价]清扬男士洗发水去屑洗发露一只羊两只羊三只羊私自羊五只羊</text>
								</view>
								<!-- 七天无理由 -->
								<view class="titleBottom">
									<text class="text">七天无理由退换</text>
									<text class="text">七天无理由退换</text>
								</view>
							</view>
						</view>
						<!-- 产品价格与数量 -->
						<view class="money">
							<view>¥27.80</view>
							<view>1</view>
						</view>
					</view>
				</view>
				<!-- 底部 -->
				<view class="allFooter">
					<view class="money">
						<!-- 底部付款 -->
						<text>总价¥27.80</text><text class="actualMoney">实付款¥27.80</text>
					</view>
					<view class="footerBtns">
						<text class="more">更多</text>
						<view class="btns">
							<navigator class="btn" url="">申请发票</navigator>
							<navigator class="btn" url="">追加评价</navigator>
							<navigator class="btn" url="">查看物流</navigator>
						</view>
					</view>
				</view>
			</view>
			<!-- 待付款 -->
			<!-- 待发货 -->
			<!-- 待收货 -->
			<!-- 待评价 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// nav选项下标
				curentcolor: "1",
				// nav下红线
				left: "45rpx",
				data: [],
				goodsList: [{
						img_url: 'http://pic.yupoo.com/isfy666/a170f298/75df2a1e.jpg'
					},
					{
						img_url: 'http://pic.yupoo.com/isfy666/eb1d0413/3083ea4a.jpg'
					},
					{
						img_url: 'http://pic.yupoo.com/isfy666/2dc3c359/04d0b388.jpg'
					},
					{
						img_url: 'http://pic.yupoo.com/isfy666/e6ef878f/e88c71ae.jpg'
					},
				],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if (option) {
				this.curentcolor = option.num;
				this.item(this.curentcolor);
			}
		},
		methods: {
			item(index) {
				this.curentcolor = index;
				switch (index) {
					case "1":
						// 样式赋值
						this.left = '45rpx';
						console.log(1);
						break;
					case "2":
						this.left = "175rpx"
						console.log(2);
						break;
					case "3":
						this.left = "323rpx"
						console.log(3);
						break;
					case "4":
						this.left = "470rpx"
						console.log(4);
						break;
					case "5":
						this.left = "620rpx"
						console.log(5);
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order .content {
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;
		padding: 20rpx;
		color: rgba(0, 0, 0, .7);
		position: relative;
		border-bottom: 3rpx solid rgba(0, 0, 0, .1);
		box-shadow: 0 0 5rpx rgba(0, 0, 0, .1);
	}

	.order .bottom {
		position: absolute;
		bottom: 0;
		width: 73rpx;
		height: 6rpx;
		transition: all .3s;
		background-color: #f00;
	}

	.order .color {
		color: #f00;
	}

	.noneCommodity {
		text-align: center;
		color: #ccc;
		font-size: 30rpx;
		// padding: 100rpx 0;
		margin-top: 100rpx;
	}

	.commodity {
		background-color: #fdfaff;
		padding: 20rpx;
		font-size: 25rpx;
	}

	.allCommodity {
		border: 1rpx solid #ccc;
		border-radius: 20rpx;
		padding: 20rpx;
		background: #fff;
	}

	.allTop,
	.allContent,
	.allTitle {
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.allTop {
		height: 70rpx;
		line-height: 70rpx;
	}

	.allTop .title {
		font-size: 35rpx;
	}

	.allTop .text {
		color: #f00;
	}

	.allContent .img {
		border: 1px solid red;
		width: 200rpx;
		height: 200rpx;
	}

	.allText {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.allText .title .titleTop {
		color: rgba(0, 0, 0, .7);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.allText .title .titleCenter {
		color: #ccc;
		margin-top: 5rpx;
	}

	.allText .title .titleBottom {
		color: #ccc;
		margin-top: 5rpx;
	}

	.allText .title .titleBottom .text {
		font-size: 20rpx;
		margin-right: 10rpx;
		background-color: #f9a900;
		color: #f00;
	}

	.allTitle .money {
		padding-left: 5rpx;
		text-align: right;
	}

	.allFooter .money {
		font-size: 30rpx;
		padding: 20rpx 0;
		text-align: right;
		color: #ccc;
	}

	.allFooter .actualMoney {
		margin-left: 20rpx;
		color: #000;
	}

	.allFooter .footerBtns {
		align-items: center;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.allFooter .footerBtns .btns {
		width: 80%;
		display: flex;
		justify-content: space-between;
	}

	.allFooter .footerBtns .btn {
		color: #ccc;
		border-radius: 2em;
		padding: 5rpx 20rpx;
		border: 1rpx solid #ccc;
	}

	.allFooter .more {
		color: #ccc;
	}
	.moreSup{
		margin-top: 30rpx;
		color: rgba(0,0,0,.7)
	}
	.goods-list {
		width: 710rpx;
		margin: 0 20rpx;
		overflow: hidden;

		&>.goods-item:nth-child(2n-1) {
			margin-right: 20rpx;
		}

		.goods-item {
			float: left;
			width: 345rpx;
			margin-top: 20rpx;
			height: 470rpx;
			border-radius: 10rpx;
			background: #fff;
			overflow: hidden;
			display: flex;
			flex-flow: column nowrap;

			.goods-img {
				width: 100%;
				height: 342rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.goods-bottom-wrap {
				height: 128rpx;
				padding: 15rpx;

				.goods-description {
					min-height: 66rpx;
					font-size: 12px;
					line-height: 1.3;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.price-wrap {
					height: 32rpx;
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
					color: #FF4B4B;
				}

			}
		}
	}
</style>
